<template>
  <div class="warpper table-data-view">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
    </div>
    <div>
      <el-tabs v-model="getProductListObj.categoryNo" type="card" @tab-click="handleClick" style="margin-top: 24px">
        <el-tab-pane label="全部" name="null"></el-tab-pane>
        <el-tab-pane label="标准化产品" name="1"></el-tab-pane>
        <el-tab-pane label="应用解决方案" name="2"></el-tab-pane>
        <el-tab-pane label="运营平台产品" name="3"></el-tab-pane>
        <el-tab-pane label="核心能力服务" name="0"></el-tab-pane>
      </el-tabs>
    </div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select v-model="getProductListObj.sortList[0]" placeholder="请选择" @change="conditionChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-input placeholder="请输入关键字" clearable v-model="getProductListObj.searchData" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="conditionChange"></el-button>
        </el-input>
      </el-col>
      <el-col :span="2" :push="8">
        <el-button icon="el-icon-refresh" type="primary">重置</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <table-list v-loading="isShowTableLoading" ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @lookUp="lookUpBtn"></table-list>
    <table-pagination :total="total" :currentPage="getProductListObj.pageNow" @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" @reset="handlRreset"></table-pagination>
    <!-- 查看详情对话框 -->
    <el-dialog title="查看详情" :visible.sync="lookDialogVisible" width="70%">
      <!-- 标准化产品 -->
      <div>
        <el-descriptions border>
          <el-descriptions-item label="产品名称" label-class-name="my-label" content-class-name="my-content">1 </el-descriptions-item>
          <el-descriptions-item label="产品归属" label-class-name="my-label" content-class-name="my-content">集团总公司 </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lookDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProductList } from '@/api/productApi.js'

export default {
  data() {
    return {
      lookDialogVisible: false,
      options: [
        {
          value: 0,
          label: '请选择排序规则',
        },
        {
          value: 1,
          label: '按星级升序',
        },
        {
          value: 2,
          label: '按星级降序',
        },
        {
          value: 3,
          label: '按入库时间升序',
        },
        {
          value: 4,
          label: '按入库时间降序',
        },
        {
          value: 9,
          label: '按公司名称升序',
        },
        {
          value: 10,
          label: '按公司名称降序',
        },
      ],
      isShowTableLoading: true,
      activeName: 'first',
      tableConfig: {},
      tableData: [],
      total: 0,
      getProductListObj: {
        categoryNo: 'null', //产品类型
        // headOrSubCompanyType: 0,
        isCurrentCompany: 0,
        pageNow: 1,
        pageSize: 10,
        searchData: '',
        sortList: [0],
      },
      propsAll: [],
      propsStandard: [],
      propSolution: [],
      propOperate: [],
      propCore: [],
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    tablePagination: () => import('@/components/table_pagination.vue'),
  },
  watch: {},
  computed: {},
  created() {
    //所有产品列表
    ;(this.tableConfig = {
      isSohwIndex: true,
      props: [],
      isOpt: true,
      optBtns: [
        {
          label: '查看',
          callback: 'lookUp',
          code: 'mgr_edit',
        },
      ],
    }),
      (this.propsAll = [
        {
          type: 'text',
          label: '标记',
          prop: 'star',
        },
        {
          type: 'text',
          label: '所属公司',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '产品名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '产品类型',
          prop: 'productCategory',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '负责人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系电话',
          prop: 'phone',
        },
      ]),
      (this.propsStandard = [
        {
          type: 'text',
          label: '标记',
          prop: 'star',
        },
        {
          type: 'text',
          label: '所属公司',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '产品名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '产品功能描述',
          prop: 'description',
        },
        {
          type: 'text',
          label: '负责人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系电话',
          prop: 'phone',
        },
      ]),
      (this.propSolution = [
        {
          type: 'text',
          label: '标记',
          prop: 'star',
        },
        {
          type: 'text',
          label: '所属公司',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '项目名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '方案描述',
          prop: 'description',
        },
        {
          type: 'text',
          label: '联系人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系人电话',
          prop: 'phone',
        },
      ]),
      (this.propOperate = [
        {
          type: 'text',
          label: '标记',
          prop: 'star',
        },
        {
          type: 'text',
          label: '所属公司',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '平台/产品名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '平台描述',
          prop: 'description',
        },
        {
          type: 'text',
          label: '联系人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系人电话',
          prop: 'phone',
        },
      ]),
      (this.propCore = [
        {
          type: 'text',
          label: '标记',
          prop: 'star',
        },
        {
          type: 'text',
          label: '公司名称',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '能力或服务名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '亮点',
          prop: 'highlights',
        },
        {
          type: 'text',
          label: '负责人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系电话',
          prop: 'phone',
        },
      ]),
      (this.tableConfig.props = this.propsAll)
    this.getProductListInfo()
  },
  mounted() {},
  methods: {
    getProductListInfo() {
      getProductList(this.getProductListObj).then((res) => {
        // console.log(res, "哈哈");
        if (res.data.code !== 200) return this.$message.error('数据请求错误')
        this.tableData = res.data.data.records
        this.isShowTableLoading = false
        this.total = res.data.data.total
      })
    },
    //tab点击事件
    handleClick(e) {
      this.isShowTableLoading = true
      //  根据产品类型设置表格配置项
      switch (e.index) {
        case '0':
          this.tableConfig.props = this.propsAll
          break
        case '1':
          this.tableConfig.props = this.propsStandard
          break
        case '2':
          this.tableConfig.props = this.propSolution
          break
        case '3':
          this.tableConfig.props = this.propOperate
          break
        case '4':
          this.tableConfig.props = this.propCore
          break
      }
      setTimeout(() => {
        this.getProductListInfo()
      }, 300)
    },
    sizeChange(newsize) {
      this.isShowTableLoading = true
      this.getProductListObj.pageNow = 1
      this.getProductListObj.pageSize = newsize
      this.getProductListInfo()
    },
    currentChange(newpage) {
      this.isShowTableLoading = true
      this.getProductListObj.pageNow = newpage
      this.getProductListInfo()
    },
    handlRreset() {
      this.isShowTableLoading = true
      this.getProductListObj.pageNow = 1
      this.getProductListInfo()
    },
    // 按条件筛选数据
    conditionChange() {
      this.getProductListInfo()
    },
    // 表格查看按钮处理事件
    lookUpBtn(row) {
      // console.log(row, "嘻嘻");
      this.lookDialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
<style>
.my-label {
  width: 150px;
  text-align: center !important;
}

.my-content {
  width: 300px;
}
</style>
